$(document).ready(function () {

    var $window = $(window),
        scrollPos = $window.scrollTop(),
        winHeight = window.innerHeight,
        screenBottom = scrollPos + winHeight,
        $body = $('body'),
        $home = $('.home'),
        $navItems = $('[data-panel]'),
        panelCount = $navItems.length,
        $contentPanel = $('[data-color]'),
        lastScrollTop = 0,
        loopCount = 1,
        panelMode = true
        ;

    function sizeNav() {
        $navItems.each(function () {
            var $this = $(this);
            $this.css({
                height: (winHeight / panelCount) + 'px'
            });
        });
    }
    sizeNav();

    $navItems.each(function () {
        var $this = $(this),
            hexVal = $this.data('panel'),
            panelBuddy = $body.find("[data-color='" + hexVal + "']");
        ;

        $this.on('click', function () {
            $("html, body").animate({
                scrollTop: panelBuddy.offset().top + 'px'
            });
        });
    });

    function bgColor() {
        $contentPanel.each(function () {
            var $this = $(this),
                thisTop = $this.offset().top,
                thisMidHeight = ($this.outerHeight() / 2),
                thisBottom = $this.offset().top + $this.outerHeight(),
                currentColor = $this.data('color'),
                topOfScreen = (scrollPos >= thisTop) && (scrollPos < thisBottom),
                midScreen = (scrollPos + (winHeight * .75)) >= (thisTop + thisMidHeight) //&& ((scrollPos + (winHeight * .15)) < thisBottom)
                ;

            if (panelMode ? topOfScreen : midScreen) {
                $body.css({
                    backgroundColor: '#' + currentColor
                });
                if (panelMode == true) {
                    $("meta[name='theme-color']").attr('content', '#' + currentColor);
                    $this.addClass('active').siblings().removeClass('active');
                } else {
                    $this.addClass('active')
                }
                $navItems.each(function () {
                    var $this = $(this);
                    if ($this.data('panel') == currentColor) {
                        $this.addClass('active').siblings().removeClass('active');
                    }
                });
            }
            if (topOfScreen) {
                $("meta[name='theme-color']").attr('content', '#' + currentColor);
            }
        });
    }
    bgColor();

    function nextPanel() {
        if (panelMode == true && !$('nav li.active').is(':last-child')) {
            $('nav li.active').removeClass('active').next().trigger('click');
        }
    }

    function prevPanel() {
        if (panelMode == true && !$('nav li.active').is(':first-child')) {
            $('nav li.active').removeClass('active').prev().trigger('click');
        }
    }

    function panelCheck() {
        $contentPanel.each(function () {

            var $this = $(this),
                $content = $this.find('article'),
                $textWrap = $this.find('.half:first-child')
                ;

            $this.removeAttr('style').css({
                height: $window.outerHeight(),
            });

            if (!$this.is("[data-color='fcd3a6']")) {
                $textWrap.css({
                    //marginTop: ($content.outerHeight() - $textWrap.outerHeight()) / 2 + 'px'
                });
            }

            if ($window.width() < 701) {
                $textWrap.removeAttr('style');
            }

            if ($content.outerHeight() > winHeight) {
                panelMode = false;
                $contentPanel.removeAttr('style');
                $textWrap.removeAttr('style');
                $body.addClass('noPanel');

                $('html, body').unbind('touchstart touchmove');
                console.log($this.find('h2').text());
                //$('#fakeConsole').text($this.find('h2').text());
                return false;
            }

            if (panelMode == true && loopCount == panelCount) {
                $body.removeClass('noPanel');
                $('html, body').on('touchstart touchmove', function (e) {
                    e.preventDefault();
                });
                $(window).bind('wheel mousewheel', function (event) {
                    event.preventDefault();
                    if (event.originalEvent.wheelDelta >= 0) {
                        clearTimeout($.data(this, 'timer'));
                        $.data(this, 'timer', setTimeout(function () {
                            prevPanel();
                        }, 100));
                    }
                    else {
                        clearTimeout($.data(this, 'timer'));
                        $.data(this, 'timer', setTimeout(function () {
                            nextPanel();
                        }, 100));
                    }
                });
                $window.swipe({
                    swipeUp: function (event, direction, distance, duration, fingerCount) {
                        if (panelMode == true) {
                            nextPanel();
                        }
                    },
                    swipeDown: function (event, direction, distance, duration, fingerCount) {
                        if (panelMode == true) {
                            prevPanel();
                        }
                    }
                });
            } else if (panelMode == false) {
                $window.unbind('mousewheel');
                $body.addClass('noPanel');
                $textWrap.removeAttr('style');
                $('html, body').unbind('touchstart touchmove');
            }

            if (loopCount < panelCount) {
                loopCount++;
            } else if (loopCount == panelCount) {
                loopCount = 1;
                return false
            }

        });
    }
    panelCheck();

    function toLastAtive() {
        $window.scrollTop($("[data-color].active").last().offset().top);
    }

    $window.scroll(function (e) {
        e.preventDefault();
        scrollPos = $window.scrollTop();
        winHeight = window.innerHeight;
        screenBottom = scrollPos + winHeight;
        bgColor();
        sizeNav();
    });

    $window.resize(function () {
        winHeight = window.innerHeight;
        setTimeout(function () {
            sizeNav();
            panelCheck();
            toLastAtive();
        }, 400);
    });

    window.addEventListener("orientationchange", function () {
        setTimeout(function () {
            panelCheck();
            toLastAtive();
        }, 400);
    }, false);

    $(document).keydown(function (e) {
        if (e.keyCode == 40 || e.keyCode == 34 || e.keyCode == 32) {
            e.preventDefault();
            nextPanel();
            return false;
        }
        if (e.keyCode == 39 || e.keyCode == 33) {
            e.preventDefault();
            prevPanel();
            return false;
        }
    });

    function svgasimg() {
        return document.implementation.hasFeature(
            "http://www.w3.org/TR/SVG11/feature#Image", "1.1");
    }

    if (!svgasimg()) {
        var e = document.getElementsByTagName("img");
        if (!e.length) {
            e = document.getElementsByTagName("IMG");
        }
        for (var i = 0, n = e.length; i < n; i++) {
            var img = e[i],
                src = img.getAttribute("src");
            if (src.match(/svgz?$/)) {
                /* URL ends in svg or svgz */
                img.setAttribute("src",
                    img.getAttribute("data-fallback"));
            }
        }
    }

    $("[data-link='cheat']").on('click', function (e) {
        e.preventDefault();
        setTimeout(function () {
            $window.scrollTop($(document).height());
        }, 1);
        document.location.href = $(this).attr('href');
    });

    $('img').unveil(400);

});


$(window).load(function () {
    setTimeout(function () { $('#loader').fadeOut(500); }, 2000);
});